<script>
export default {
  data () {
    return {
      rankList: []
    }
  },
  methods: {
    getRankList () {}
  },
  mounted () {
    const _this = this
    _this
      .$http({
        method: 'get',
        url: '/poi/rankList'
      })
      .then(function (response) {
        _this.rankList = response.data.list
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>
<template>
  <div class="content">
    <h2>排行榜</h2>
    <div class="partition"></div>
    <div class="item" v-for="item in rankList" :key="item.id">{{ item.name }}</div>
  </div>
</template>
<style lang="less" scoped>
.content {
  height: 100%;
  padding: 20px;
  .partition {
    background-color: black;
    height: 1px;
    width: 100%;
  }
  .item {
    font-size: 20px;
    height: 45px;
    color: white;
    line-height: 50px;
    font-family: cool;
    border-bottom: 1px solid rgb(83, 83, 83);
    box-sizing: border-box;
    cursor: pointer;
  }
  .item:last-child{
    border-bottom: none;
  }
  .item:hover{
    color: black;
  }
}
</style>
